<template>
	<view class="content">
		<image class="logo" @click="imgtext = '../../static/login.jpg'" :src="imgtext"></image>
		<view class="title">欢迎登录</view>
		<view class="login-form">
			<u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm">
				<u-form-item label=" " prop="user" borderBottom>
					<u--input v-model="loginForm.user" placeholder="请输入账号" border="none"></u--input>
				</u-form-item>
				<u-form-item label=" " prop="password" borderBottom>
					<u--input type="password" v-model="loginForm.password" placeholder="请输入密码" border="none"></u--input>
				</u-form-item>
				<u-form-item label=" " prop="code" borderBottom>
					<u-input v-model="loginForm.code" placeholder="请输入验证码" border="none">
						<template slot="suffix">
							<image @click="checkCode" class="codeimage" :src="imgBase64" mode=""></image>
							<!-- <u--image @click="checkCode" :showLoading="true" :src="imgBase64" width="180rpx" height="70rpx"></u--image> -->
						</template>
					</u-input>
				</u-form-item>
			</u--form>
			<view class="login-botton">
				<u-button @click="loginGO" :disabled="!loginBtnLoading" type="primary">
					<view v-if="loginBtnLoading">登录</view>
					<u-loading-icon color="white" textColor="white" v-else text="登录中" textSize="15"></u-loading-icon>
				</u-button>

			</view>

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
let app = getApp()
export default {
	data() {
		return {
			imgtext: 'https://shcar010.oss-cn-beijing.aliyuncs.com/20220706/1657091015003316.jpg?Expires=1972451015&OSSAccessKeyId=LTAI5t9Qw5QggN9fNWRa7Uj7&Signature=96YrjEvEqmcxFkPQK7qj2eHGDpY%3D',
			// 验证码图片base64
			imgBase64: '',
			loginBtnLoading: true,
			// 登录的表单数据
			loginForm: {
				user: '', // 用户名
				password: '', // 密码
				code: '', // 验证码
				key: '' // 验证码的key
			},
			rules: {
				user: {
					type: 'string',
					required: true,
					message: '请输入账号',
					trigger: ['blur']
				},
				password: {
					type: 'string',
					required: true,
					message: '请输入密码',
					trigger: ['blur']
				},
				code: {
					type: 'string',
					required: true,
					message: '请输入验证码',
					trigger: ['blur']
				},
			}
		}
	},
	onLoad() {
		uni.getNetworkType({
			success: (res) => {
				if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == 'none') {
					this.imgtext = '../../static/login.jpg'
				}
			},
			fail: () => {

			}
		})
	},
	beforeCreate() {

	},
	onShow() {
		uni.hideHomeButton()
		if (this.$API.getStorage('token')) {
			uni.redirectTo({
				url: '/pages/home/home'
			})
		} else {
			// 获取验证码
			this.checkCode()
		}
	},
	mounted() {

	},
	methods: {
		// 切换验证码
		async checkCode() {
			const res = await this.$API.post('/getVerificationCode', {})
			if (res.statusCode == 200) {
				this.imgBase64 = res.data.img
				this.loginForm.key = res.data.key
			}
		},
		// 登录函数
		async loginGO() {
			try {
				const vali = await this.$refs.loginForm.validate()
				if (vali) {
					// 开启登录按钮登陆中加载状态和按钮禁用
					this.loginBtnLoading = false
					let ajaxData = {
						userName: this.loginForm.user,
						password: this.loginForm.password,
						verificationCode: this.loginForm.code,
						key: this.loginForm.key
					}
					const res = await this.$API.post('/login', ajaxData, app.globalData.formdata)
					if (res.data.code == 200) {
						res.data.data.authorityMenu.authority.forEach(item => {
							if (item.id == '10') {
								// 储存用户权限
								this.$API.setStorage('relosuser', 10)
							}
						})
						// 储存经办人
						this.$API.setStorage('JBname', res.data.data.realName)
						// 储存审核权限
						this.$API.setStorage('SHrelos', res.data.data.authorityType)
						// 储存token
						this.$API.setStorage('token', res.data.data.token)
						// 关闭登录按钮登陆中加载状态和按钮禁用
						this.loginBtnLoading = true
						uni.redirectTo({
							url: '/pages/home/home'
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.data.message,
						})
						// 获取验证码
						this.checkCode()
						// 关闭登录按钮登陆中加载状态和按钮禁用
						this.loginBtnLoading = true
					}
				}
			} catch (err) {
				console.log('登录函数错误', err)
				this.$refs.uToast.show({
					type: 'error',
					message: err?.[0]?.message || '账号密码错误',
				})
				// 获取验证码
				this.checkCode()
				this.loginBtnLoading = true
			}

		},
	}
}
</script>

<style scoped>
.content {
	width: 100%;
	height: 100%;
	padding-bottom: 40rpx;
	box-sizing: border-box;
}

.logo {
	height: 400rpx;
	width: 100%;
	margin-bottom: 50rpx;
}

.title {
	width: 100%;
	padding-left: 80rpx;
	margin-bottom: 40rpx;
	font-size: 50rpx;
	color: black;
	font-weight: 900;
}

.login-form {
	width: 100%;
	box-sizing: border-box;
	padding: 0rpx 100rpx;
}

.login-botton {
	width: 50%;
	margin: 80rpx auto 0rpx auto;
}

.codeimage {
	width: 180rpx;
	height: 70rpx;
}
</style>
